<template>
  <div class="customer-detail wap">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}"><span>客户详情</span></x-header>
    <div class="item">
      <div class="customer-info-container display-flex">
        <img class="customer-head" :src="getHeader(customerInfo)" alt="">
        <div class="display-flex flex-direction-column flex-1">
          <div class="display-flex">
            <span class="flex-1 store-name beyond-one">{{customerInfo.name?customerInfo.name:'暂未添加店铺名称'}}</span>
            <span class="customer-level">{{customerInfo.type}}</span>
          </div>
          <div class="customer-info display-flex">
            <span class="customer-name">{{customerInfo.contactNameForSeller}}</span>
            <a @click.stop="callUser($event,customerInfo.phone)"
               class="display-flex  justify-content-flex-center align-items-center">
              <span class="customer-phone">{{customerInfo.phone}}</span>
              <span class="display-flex img-bg justify-content-flex-center align-items-center"><img class="call"
                                                                                                    src="../../assets/img/customer/call_gray.png"></span>
            </a>

          </div>
          <div class="pay-info display-flex  align-items-center">
            <span><span class="pay-way">付款方式:</span>{{customerInfo.payWay}}</span>
            <span @click="showPaywayDialog"
                  class="edit-pay-way display-flex justify-content-flex-center align-items-center"><img
              src="../../assets/img/customer/edit_pay_way.png" alt="">修改</span>
          </div>
        </div>
      </div>
      <div class="order-info display-flex align-items-center">
        <div class="order-amount flex-1 display-flex flex-direction-column align-items-center">
          <div class="value">{{customerInfo.totalWaitPayAmount}}</div>
          <div class="lable">未付款</div>
        </div>
        <div class="line"></div>
        <div class="order-amount flex-1 display-flex flex-direction-column align-items-center">
          <div class="value">{{customerInfo.totalOrderAmount}}</div>
          <div class="lable">实付款</div>
        </div>
        <div class="line"></div>
        <div class="order-count flex-1 display-flex flex-direction-column align-items-center">
          <div class="value">{{customerInfo.totalOrderCount}}</div>
          <div class="lable">订单数</div>
        </div>
      </div>
    </div>
    <div class="order-state">
      <sticky  :check-sticky-support="false">
        <tab active-color="#527DD9" :animate="false">
          <tab-item class="" selected @on-item-click="onItemClick(0)">未付款</tab-item>
          <tab-item @on-item-click="onItemClick(1)">交易完成</tab-item>
          <tab-item @on-item-click="onItemClick(2)">收藏列表</tab-item>
        </tab>
      </sticky>

    </div>
    <div class="main" >
      <scroller
        :noDataText="this.$noData(orderList)"
        ref="scroll"
        :on-refresh="refresh"
        :on-infinite="infinite">
        <div>

          <div class="list">
            <div class="list-item" v-show="currentIndex==0" v-for="(item,index) in orderList1" :key="item.id">
              <div class="header display-flex justify-content-flex-justify vux-1px-b">
                <span class="time">{{item.creTime}}</span>
                <span class="expand" @click="showGood(item,index)">{{item.expand?'收起':'展开'}}
                  <x-icon size="15" v-if="item.expand" type="ios-arrow-up" class="icon-blue"></x-icon>
                  <x-icon size="15" v-if="!item.expand" type="ios-arrow-down" class="icon-blue"></x-icon>
                </span>
              </div>
              <div v-if="item.expand&&currentIndex!=2">
                <goodItem :list="item.saleOrderDetailVOList"></goodItem>
                <div class="amount display-flex align-items-center justify-content-flex-justify">
                  <div class="order-no">
                    <span class="lable">订单号:</span>
                    <span>{{item.orderNo}}</span>
                  </div>
                  <div>
                    <span class="lable">实付金额:</span>
                    <span class="value">{{item.realAmount}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="list-item" v-show="currentIndex==1" v-for="(item,index) in orderList2" :key="item.id">
              <div class="header display-flex justify-content-flex-justify vux-1px-b">
                <span class="time">{{item.creTime}}</span>
                <span class="expand" @click="showGood(item,index)">{{item.expand?'收起':'展开'}}
                  <x-icon size="15" v-if="item.expand" type="ios-arrow-up" class="icon-blue"></x-icon>
                  <x-icon size="15" v-if="!item.expand" type="ios-arrow-down" class="icon-blue"></x-icon>
                </span>
              </div>
              <div v-if="item.expand&&currentIndex!=2">
                <goodItem :list="item.saleOrderDetailVOList"></goodItem>
                <div class="amount display-flex align-items-center justify-content-flex-justify">
                  <div class="order-no">
                    <span class="lable">订单号:</span>
                    <span>{{item.orderNo}}</span>
                  </div>
                  <div>
                    <span class="lable">实付金额:</span>
                    <span class="value">{{item.realAmount}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="list-item" v-show="currentIndex==2">
              <goodItem :useType="1" :list="orderList3"></goodItem>
            </div>
            <no-data v-show="loadOk"  @refreshData="refresh(0)" :list="getList()"></no-data>
          </div>
        </div>
      </scroller>

    </div>

    <payWayDialog :payWayInit="payWay" :customerId="customerId" @payWayComfirm="payWayComfirm" ref="dialog"
                  :defaultDialog="dialog"></payWayDialog>
  </div>
</template>
<script type="text/ecmascript-6">
  import goodItem from '../../components/good-item.vue'
  import payWayDialog from '../../components/pay-way-dialog.vue'
  import {  Sticky } from 'vux'
  export default {
    data() {
      return {
        currentIndex: 0,
        dialog: false,
        customerId: '',
        customerInfo: {},
        page: 1,
        hasNext: true,
        orderList: [],
        orderList1: [],
        orderList2: [],
        orderList3: [],
        lastSelectIndex: -1,
        loadOk:false,
        payWay:undefined,
        positionArr: [],
        isScroll:true
      }
    },
    components: {
      goodItem,
      payWayDialog,
      Sticky
    },
    created() {
      this.customerId = this.$route.query.id;
      this.initCustomerInfo();
      this.initOrder(0, 1,this.currentIndex);
    },
    mounted(){
      document.getElementsByClassName('main')[0].addEventListener('touchmove',this.touchMoveScroll,false)
    },
    destroyed(){
      document.getElementsByClassName('main')[0].removeEventListener('touchmove',this.touchMoveScroll,false)
    },
    methods: {
      touchMoveScroll(){
        this.isScroll=false;
        setTimeout(()=>{
          this.isScroll=true;
        },3000)
      },
      getList(){
        if(this.currentIndex==0){
            return this.orderList1;
        }else if(this.currentIndex==1){
          return this.orderList2;
        }else{
          return this.orderList3;
        }
      },
      initCustomerInfo() {
        this.$ajax.get("customer/detail", (res) => {
          if (res.code == 200) {
            console.log("客户信息", res);
            this.customerInfo = res.data;
            this.payWay=res.data.payWay;
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, {customerId: this.customerId})
      },
      initOrder(freshType, orderType,index) {
        console.log("==index==",index);
        if (this.currentIndex == 0 || this.currentIndex == 1) {
          this.$ajax.get("customer/detail/order", (res) => {
            this.dealResult(freshType, res,index);
          }, {orderStateType: orderType, customerId: this.customerId, pageNo: this.page, pageSize: this.$rows})
        } else {
          this.$ajax.get("customer/detail/collect", (res) => {
            this.dealResult(freshType, res,index);
          }, {customerId: this.customerId, pageNo: this.page, pageSize: this.$rows})
        }
      },
      dealResult(freshType, res,index) {
        if (res.code == 200) {
          console.log("=====res", res);
          if (freshType == 0&&this.page==1) {
            if(index==0){
              this.orderList1 = res.data;
            }else if(index==1){
              this.orderList2 = res.data;
            }else if(index==2){
              this.orderList3 = res.data;
            }
          } else {

            if(index==0){
              this.orderList1 = this.orderList1.concat(res.data);
            }else if(index==1){
              this.orderList2 = this.orderList2.concat(res.data);
            }else if(index==2){
              this.orderList3 = this.orderList3.concat(res.data);
            }
          }
          if(index==0){
            if (this.orderList1 && this.orderList1.length > 0) {
              this.orderList1[0].expand = true;
            }
          }else if(index==1){
            if (this.orderList2 && this.orderList2.length > 0) {
              this.orderList2[0].expand = true;
            }
          }



          freshType == 0 && this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
          if (!res.data || res.data&&res.data.length < this.$rows) {
            this.hasNext = false;
            freshType == 1 && this.$refs.scroll && this.$refs.scroll.finishInfinite(true);
          } else {
            this.hasNext = true;
            freshType == 1 && this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
          }
          this.scrollTpPosition()

        } else {
          this.hasNext = false;
          this.$vux.toast.text(res.msg, 'center');
          freshType == 0 && this.$refs.scroll && this.$refs.scroll.finishPullToRefresh();
          freshType == 1 && this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
        }
        this.loadOk=true;
      },
      refresh() {
        console.log("====refresh");
        this.hasNext = true;
        this.page = 1;
        this.positionArr[this.currentIndex] =undefined;
        if (this.currentIndex == 0) {
          this.initOrder(0, 1,this.currentIndex)
        } else if (this.currentIndex == 1) {
          this.initOrder(0, 3,this.currentIndex)
        } else {
          this.initOrder(0, null,this.currentIndex)
        }
      },
      infinite() {
        console.log("====inflate");
        if (this.hasNext) {
          this.page++;
          if (this.currentIndex == 0) {
            this.initOrder(1, 1,this.currentIndex)
          } else if (this.currentIndex == 1) {
            this.initOrder(1, 3,this.currentIndex)
          } else {
            this.initOrder(1, null,this.currentIndex)
          }
        } else {
          this.$refs.scroll && this.$refs.scroll.finishInfinite(true)
        }
      },
      onItemClick(index) {
        if(this.currentIndex!=index){
          this.positionArr[this.currentIndex] = this.$refs.scroll.getPosition();
        }
        this.orderList = [];
        this.page = 1;
        this.hasNext = true;
        this.currentIndex = index;

        this.$refs.scroll && this.$refs.scroll.finishInfinite(false);
        if (index == 0) {
          if(this.orderList1.length==0){
            this.$refs.scroll && this.$refs.scroll.scrollTo(0, 0, false)
            this.initOrder(0, 1,index)
          }else{
            this.scrollTpPosition();
          }

        } else if (index == 1) {
          if(this.orderList2.length==0) {
            this.$refs.scroll && this.$refs.scroll.scrollTo(0, 0, false)
            this.initOrder(0, 3,index)
          }else{
            this.scrollTpPosition();
          }

        } else {
          if(this.orderList3.length==0) {
            this.$refs.scroll && this.$refs.scroll.scrollTo(0, 0, false)
            this.initOrder(0, null,index)
          }else{
           this.scrollTpPosition();
          }
        }
      },
      showPaywayDialog() {
        this.$refs.dialog.showDialog();
      },
      payWayComfirm(params) {
        this.initCustomerInfo();
      },
      getHeader(item) {
        if (item.logo) {
          return item.logo
        } else {
          return require('../../assets/img/customer/customer_head.png');
        }
      },
      callUser(event, phone) {
        if (this.$fromApp(this)) {
          this.$callJava({code: 1001, phone: phone})
        } else {
          window.location.href = "tel:" + phone;
        }
      },
      scrollTpPosition(){
        if(this.positionArr[this.currentIndex]&& this.positionArr[this.currentIndex].top>0&&this.isScroll){
          setTimeout(()=>{
            this.$refs.scroll.scrollTo(0,  this.positionArr[this.currentIndex].top, true)
          },100)
        }
      },
      showGood(item, index) {

        if(this.currentIndex==0){
          this.orderList= this.orderList1;
        }else if(this.currentIndex==1){
          this.orderList= this.orderList2;
        }else if(this.currentIndex==2){
          this.orderList= this.orderList3;
        }
        item.expand = !item.expand;
        this.$set(this.orderList, index, item)
      },
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .customer-detail {
    background: #f5f5f5;
    height: 100%;
    .no-data {
      margin-top: 10%;
    }
    .order-state {
      /deep/ .vux-tab-item {
        line-height: normal;
        font-size: .28rem;
        padding-top: 0.28rem;
      }
    }
    .order-no{
      padding-top: .15rem;
      padding-left: .2rem;
      .lable{
        margin-right: .1rem;
      }
    }
    .item {
      margin-bottom: .2rem;
      background: #527DD9;
      .customer-info-container {
        padding: 0.32rem 0 0 .32rem;
        .customer-head {
          width: 0.92rem;
          height: 0.92rem;
          margin-right: 0.18rem;
          border-radius: 0.92rem;
        }
        .store-name {
          font-size: 0.32rem;
          font-weight: bold;
          color: #fff;
        }
        .customer-level {
          height: 0.42rem;
          padding: .01rem .2rem;
          border: 1px solid #8CAAEA;
          border-bottom-left-radius: 0.2rem;
          border-top-left-radius: 0.2rem;
          font-size: 0.24rem;
          color: #fff;
          background: #8CAAEA;
        }
        .customer-info {
          margin-top: .21rem;
          font-size: 0.26rem;
          color: #eee;
          a {
            text-decoration: none;
          }
          .customer-phone {
            color: #eee;
          }
          .customer-name {
            margin-right: .3rem;
          }
          .img-bg {
            margin-left: 0.15rem;
            width: .4rem;
            height: .4rem;
            background: rgba(67, 111, 204, 1);
            border-radius: 50%;
            img {
              width: .22rem;
              height: .22rem;
            }
          }

        }
        .pay-info {
          font-size: .26rem;
          color: #c1c1c1;
          margin-top: .6rem;
          .pay-way {
            padding-right: .2rem;
            color: #fff;
            span {
              color: rgba(255, 255, 255, 1);
              opacity: 0.6;
            }
          }
          .edit-pay-way {
            margin-left: .2rem;
            height: .48rem;
            border-radius: .48rem;
            background: #436FCC;
            padding: .02rem .2rem;
            img {
              margin-right: .08rem;
              width: .22rem;
              height: .22rem;
            }
          }
        }
      }
      .order-info {
        margin-top: .3rem;
        background: #fff;
        padding: .2rem 0;
        .value {
          font-size: .32rem;
          color: #333;
        }
        .line {
          height: 0.76rem;
          width: 1px;
          background: #222;
          opacity: 0.1;
        }
        .lable {
          margin-top: .08rem;
          font-size: .26rem;
          font-weight: 500;
          color: #666;
        }
      }
    }
    .list {
      background: #f5f5f5;
      .list-item {
        background: #fff;
        margin-bottom: .2rem;
        .time {
          font-size: .26rem;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
        .header {
          padding: .25rem .3rem;
        }
        .expand .icon-blue {
          fill: #527DD9;
          vertical-align: middle;
          margin-top: -0.03rem;
        }
        .amount {
          margin-right: .3rem;
          text-align: right;
          padding: .2rem 0rem;
          & .lable {
            font-size: .28rem;
            color: #333;
          }
          & .value {
            font-size: .36rem;
            font-weight: bold;
            color: #FC6E51;
          }
        }

      }
    }
  }
</style>
